<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			
			.box {
				margin: 50px 50px auto;
				position: relative;
			}
			
			.box ul {
				display: inline-flex;
			}
			
			.box ul li {
				list-style: none;
				width: 100px;
				height: 50px;
				line-height: 50px;
				text-align: center;
				background-color: #2286E2;
				z-index: 100;
			}
			
			.li-bg {
				width: 100px;
				height: 50px;
				background: url(imgs/cloud.gif) no-repeat center;
				position: absolute;
				top: 0;
				left: 0;
				z-index: 104;
				opacity: 0.5;
			}
		</style>
	</head>

	<body>

		<!-- 作业：
			导航条     随鼠标的滑动，背景图跟着移动
					若点击相应的li，则背景图定位到选择的位置
					若没有点击，则背景图回到鼠标离开的位置
		-->

		<div id="box" class="box">
			<span id="" class="li-bg">
				
			</span>
			<ul>
				<li>首页介绍</li>
				<li>案例展示</li>
				<li>案例展示</li>
				<li>案例展示</li>
			</ul>
		</div>

		<script type="text/javascript">
			//鼠标放入每一个li的时候，云彩缓动到鼠标所在位置
			var cloud = document.getElementsByTagName("span")[0];
			var lis = document.getElementsByTagName("li");
			var current;
			for(var i = 0; i < lis.length; i++) {
				//debugger
				lis[i].index = i;
				lis[i].onmouseenter = function() {

					target = 100 * this.index;
				}

				lis[i].onmouseleave = function() {
					//让云彩停止上次点击的位置
					target = current;
				}

				lis[i].onclick = function() {
					//记录当前位置
					current = this.offsetLeft;
				}
			}

			var leader = 0,
				target = 0;

			setInterval(function() {
				leader = leader + (target - leader) / 10;
				cloud.style.left = leader + "px";

			}, 10);
		</script>
	</body>

</html>